import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, Modal } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
@connect(({ loading, prodetailupdate }) => ({
  loading: loading.models.protection,
  detailList: prodetailupdate.detailList,
}))
@Form.create()
class ProDetail extends Component {
  componentDidMount() {
    this.proupdate();
  }

  // 修改收入回显
  proupdate = () => {
    const { dispatch, dataSource } = this.props;
    dispatch({
      type: 'prodetailupdate/getDetailMessage',
      payload: { wageOrderInfoId: dataSource.busiId },
    });
  };

  // 模态框显隐
  handleModalVisible = () => {
    const { dispatch, form, handleModalVisible = () => {} } = this.props;
    handleModalVisible();
    dispatch({
      type: 'prodetailupdate/monUpdate',
      payload: { dateList: {} },
    });
    form.resetFields();
  };

  // 修改提交
  submitModalData = () => {
    const { dispatch, dataSource, form, location, submitModalData = () => {} } = this.props;
    const values = form.getFieldsValue();
    values.wageOrderInfoId = dataSource.busiId;
    if (!values.bankCardId || !values.mobile || !values.accoHolderName) {
      return;
    }
    values.bankCardId = values.bankCardId;
    values.mobile = values.mobile;
    values.accoHolderName = values.accoHolderName;
    dispatch({
      type: 'prodetailupdate/subUpdateGrantMessage',
      payload: { params: values },
      callback: res => {
        if (res.success) {
          submitModalData();
          const { probDetId } = location.query;
          dispatch({
            type: 'prodetailupdate/feactProDetail',
            payload: { wageOrderProbId: probDetId },
          });
        }
      },
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      loading,
      detailList,
      modalShow,
    } = this.props;
    const modalItemLayout = {
      labelCol: { md: { span: 5 } },
      wrapperCol: { md: { span: 14 } },
    };
    return (
      <Modal
        width={600}
        title="修改工资"
        visible={modalShow}
        onCancel={() => this.handleModalVisible(false)}
        footer={[
          <Button onClick={() => this.handleModalVisible(false)}>取消</Button>,
          <Button type="primary" loading={loading} onClick={() => this.submitModalData()}>
            确定
          </Button>,
        ]}
      >
        <div>
          <FormItem
            {...modalItemLayout}
            label="银行卡号"
            style={{ display: 'block', margin: '0 0 20px 50px' }}
          >
            {getFieldDecorator('bankCardId', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: detailList.bankCardId || null,
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem
            {...modalItemLayout}
            label="开户行"
            style={{ display: 'block', margin: '0 0 20px 50px' }}
          >
            {getFieldDecorator('accoHolderName', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: detailList.accoHolderName || '',
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem
            {...modalItemLayout}
            label="手机号"
            style={{ display: 'block', margin: '0 0 20px 50px' }}
          >
            {getFieldDecorator('mobile', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: detailList.mobile || null,
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem
            {...modalItemLayout}
            label="备注"
            style={{ display: 'block', margin: '0 0 20px 50px' }}
          >
            {getFieldDecorator('remark', {
              rules: [{ required: false, message: '请输入' }],
              initialValue: detailList.remark || null,
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default ProDetail;
